<script>
import kstJy_detail from "./components/kstJy_detail.vue";

export default {
  components: {
    kstJy_detail
  },
  data() {
    return {
      // 加油列表
      indexList: [
        {
          contactMobiles: {},
        }
      ],
      longitude: '', // 经度
      latitude: '', // 纬度
      selectGasName:'', // 搜索加油站名称
      topList: [
        '请不要在加油站内吸烟或使用明火',
        '加油时请熄火',
        '禁止在加油区域内使用手机'
      ],
      currentView: 'list', // 切换页面
      selectedItem: {}, // 当前选中的加油站
      distance:'', // 距离
      driverDetail: {
        privatecarCarnumber:'',
        driver1:'',
        tel1:''
      } , // 司机信息
      status: 'loadmore',
      pageSize: 15,
      page: 0
    };
  },
  onReachBottom() {
    if(this.page >= 3) return ;
    this.status = 'loading';
    this.page = ++ this.page;
    setTimeout(() => {
      this.pageSize += 10;
      this.loadmore();
      if(this.page >= 3) this.status = 'nomore';
      else this.status = 'loading';
    }, 2000)
  },
  onLoad() {
    /* 获取经纬度 */
    // 获取当前位置的经纬度
    let that = this; // 保存当前组件的引用
    uni.getLocation({
      type: 'gcj02', // 使用高德地图坐标系
      altitude: false, // 不需要海拔信息
      success: function (res) {
        console.log("成功获取位置:", res);
        that.longitude = res.longitude; // 存储经度
        that.latitude = res.latitude; // 存储纬度
        // 获取位置后，可以调用其他方法，例如加载加油列表
        that.loadmore();
      },
      fail: function (err) {
        console.error("获取位置失败:", err);
        // 处理获取位置失败的情况，例如显示提示
        uni.showToast({
          title: '获取位置失败，请稍后重试',
          icon: 'none'
        });
      }
    });
    /* 获取司机信息 */
    this.getDriver()
  },
  methods: {
    /* 切换详情页 */
    handoff(stationId) {
      // 这里接收到点击的 item 数据
      this.currentView = 'detail';

      const postData = {
        longitude: this.longitude,
        latitude: this.latitude,
        stationId: stationId
      };
      uni.showLoading({
        title: '加载中...'
      })
      this.$http.post('/rest/kstJy/getStationInfo', postData, {})
          .then(res => {
            this.selectedItem = res.data.data.data;
            // 用于确保所有条件都必须为 true 才能执行条件语句内的代码。
            if (this.selectedItem && this.selectedItem.latitude && this.selectedItem.longitude) {
              // 确保所有必要的经纬度都已定义
              this.distance = this.getMapDistance(
                  this.latitude, // 当前纬度
                  this.longitude, // 当前经度
                  this.selectedItem.latitude, // 加油站纬度
                  this.selectedItem.longitude // 加油站经度
              );
            }
            console.log('距离',this.distance);
            uni.hideLoading(); // 关闭加载
          })
          .catch(err => {
            uni.showToast({
              title: err || '请求失败',
              icon: 'none'
            });
            uni.hideLoading(); // 关闭加载
          })
    },

    /* 返回列表 */
    goToBack() {
      this.currentView = 'list';
    },
    /* 获取加油列表 */
    loadmore() {
      // 加载中样式
      uni.showLoading({
        title: '加载中...'
      })
      const postData = {
        longitude: this.longitude,
        latitude: this.latitude,
        gasName: this.selectGasName,
        city: '',
        pageSize: this.pageSize,
        page: this.page
      };

      this.$http.post('/rest/kstJy/getStationLists', postData, {})
          .then(res => {
            this.indexList = res.data.data.data;
            uni.hideLoading(); // 关闭加载
          })
          .catch(err => {
            uni.showToast({
              title: err.data.msg || '请求失败',
              icon: 'none'
            });
            uni.hideLoading(); // 关闭加载
          })
    },
    getDriver(){
      this.$http.get('/rest/kstJy/getDriver', {
        header:{
          'Authorization': uni.getStorageSync('token'),
        }
      })
          .then(res => {
            this.driverDetail.privatecarCarnumber = res.data.data.privatecarCarnumber;
            this.driverDetail.driver1 = res.data.data.driver1;
            this.driverDetail.tel1 = res.data.data.tel1;
            // console.log("司机：",res.data.data);
          })
          .catch(err => {
            console.log("司机：",err)
          });
    },
    /* 联系我们 */
    callPhone(phoneNumber) {
      uni.makePhoneCall({
        phoneNumber: phoneNumber
      });
    },
    //进行经纬度转换为距离的计算
    Rad(d) {
      return d * Math.PI / 180.0; //经纬度转换成三角函数中度分表形式。
    },
    /*
     计算距离，参数分别为第一点的纬度，经度；第二点的纬度，经度
     默认单位km
    */
    getMapDistance(lat1, lng1, lat2, lng2) {
      var radLat1 = this.Rad(lat1);
      var radLat2 = this.Rad(lat2);
      var a = radLat1 - radLat2;
      var b = this.Rad(lng1) - this.Rad(lng2);
      var s = 2 * Math.asin(Math.sqrt(Math.pow(Math.sin(a / 2), 2) +
          Math.cos(radLat1) * Math.cos(radLat2) * Math.pow(Math.sin(b / 2), 2)));
      s = s * 6378.137; // EARTH_RADIUS;
      s = Math.round(s * 10000) / 10000; //输出为公里
      //s=s.toFixed(2);
      return s;
    },
  },
}
;
</script>

<template>
  <view>
    <!--    列表页-->
    <view class="container" v-if="currentView === 'list'">
      <view>
        <u-notice-bar :close-icon="true" :list="topList"/>
        <view class="selectGasName">
          <!-- 搜索框 -->
          <u-search
              placeholder="输入站点关键词搜索"
              :clearable="true"
              v-model="selectGasName"
              border-color="#606266"
              @custom="loadmore"
              @search="loadmore"
          />
        </view>
      </view>
      <!-- 加油列表集合 -->
      <view v-for="(item, index) in indexList" :key="index">
        <u-card :title="item.gasName" :sub-title="item.gasAddress" @click="handoff(item.stationId)">
          <view class="card-body" slot="body">
            <!-- 左侧：油价和营业时间 -->
            <view class="card-left">
              <view class="price-info">
                <u-icon name="rmb-circle-fill" color="#2979ff" size="28"/>
                <span>当前油价：{{ item.unitPrice }}元</span>
              </view>
              <view class="time-info">
                <u-icon name="clock" color="#2979ff" size="28"/>
                <span>营业时间：{{ item.workStartTime }} - {{ item.workEndTime }}</span>
              </view>
            </view>
            <!-- 右侧：联系电话和查看更多 -->
            <view class="card-right">
              <u-button type="primary" :plain="true" size="mini" @click="callPhone(item.contactMobiles[0])">联系电话
              </u-button>
            </view>
          </view>
          <view class="" slot="foot">查看更多
            <u-icon name="arrow-right-double" size="30"></u-icon>
          </view>
        </u-card>
      </view>
      <u-loadmore :status="status" />
    </view>
    <!--    详情页1-->
    <view class="container-detail" v-if="currentView === 'detail'">
      <kst-jy_detail :driverDetail="driverDetail" :distance="distance" :current-item="selectedItem" @back-to-list="goToBack"/>
    </view>

  </view>
</template>

<style lang="scss">
.card-body {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.card-left {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 10rpx; /* 间距 */
}

.price-info,
.time-info {
  display: flex;
  align-items: center;
  gap: 5rpx; /* 图标和文本之间的间距 */
}

.card-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10rpx; /* 调整按钮和文本之间的间距 */
}
.selectGasName{
  width: 95%;
  margin-left: 20rpx;
  margin-top: 20rpx;
}
</style>
